<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="400px"
                 class="demo-ruleForm">
            <img class="bgone" src="../assets/img/1.jpg">
            <img class="pic" src="../assets/img/a.png">
            <div class="table">
                <div class="wel">课程分析系统</div>
                <div class="wel1">KE CHENG FEN XI XI TONG</div>
                <div class="user">
                    <el-input v-model="ruleForm.account" style="width: 373px;height: 55px;"
                              prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input>
                    <!--<input type="text" name="" placeholder="用户名">-->
                </div>
                <div class="password">
                    <el-input v-model="ruleForm.password" type="password" style="width: 373px;height: 55px;"
                              prefix-icon="el-icon-s-goods" placeholder="●●●●●●"></el-input>
                </div>
                <el-button type="primary" class="btn" @click="login('ruleForm')">登录</el-button>
            </div>
        </el-form>
    </div>
    <!--<el-form style="width: 40%" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
            <el-input v-model="ruleForm.account"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="login('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>-->
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    account: '',
                    password: ''
                },
                rules: {
                    account: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            };
        },
        methods: {
            login(formName) {
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/login", this.ruleForm).then(function (resp) {
                            var result = resp.data
                            if (result === 'success') {
                                _this.$message({
                                    message: '登录成功！',
                                    type: 'success'
                                });
                                window.sessionStorage.setItem('token', result)
                                _this.$router.push("/")
                            } else {
                                _this.$message({
                                    message: '用户名或者密码错误！！',
                                    type: 'error'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style>
    * {
        font-family: "微软雅黑";
        font-size: 16px;
        border: 0;
        padding: 0;
        margin: 0;
        color: #666;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .bgone {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    .pic {
        width: 492px;
        height: auto;
        position: absolute;
        top: 173px;
        right: 453px;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: 99999;
    }

    .table {
        background-color: #FFFFFF;
        width: 960px;
        height: 465px;
        position: absolute;
        top: 20%;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    .password {
        position: absolute;
        top: 12.8rem;
        right: 4rem;
        display: flex;
    }

    .btn {
        position: absolute;
        top: 18.5rem;
        right: 3.9rem;
        border: none;
        color: #fff;
        width: 373px;
        text-align: center;
        background-color: #1592ef;
        text-indent: 0rem;
        border-radius: 10px;
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
        font-size: 20px;
        height: 50px;
    }

    .wel {
        width: 960px;
        height: 35px;
        color: #fff;
        font-size: 30px;
        position: absolute;
        top: -7rem;
        text-align: center;


    }

    .wel1 {
        width: 960px;
        height: 35px;
        color: #fff;
        font-size: 12.38px;
        position: absolute;
        top: -4rem;
        text-align: center;

    }

    input {
        height: 55px;
        width: 373px;
        text-indent: 55px;
        outline: none;
        background: #eef6fd;
        border-bottom: 2px #d6e7fa solid;
    }


    .user {
        position: absolute;
        top: 7.8rem;
        right: 4rem;
        display: flex;
    }

    #yonghu img {
        height: 30px;
        position: absolute;
        left: 10px;
        top: 13px;
    }
</style>